<template>
    <van-nav-bar :title="videoData.username" left-text="返回" left-arrow :background="backgroundc" text-light @click-left="onClickLeft"
        @click-right="onClickRight" />

    <div class="videos">
        <video width="100%" height="240" controls autoplay>
            <source src="http://www.hphs.com/mp4/paoche.mp4" type="video/mp4">
            <source src="http://www.hphs.com/mp4/paoche.ogg" type="video/ogg">
            您的浏览器不支持Video标签。
        </video>
        <div>
            <van-row>
                <van-col span="4">{{ videoData.username }}</van-col>
                <van-col span="4">{{ videoData.count }}万次播放</van-col>
                <van-col span="16">{{ videoData.createtime }}</van-col>
            </van-row>

        </div>

    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
const backgroundc = ref('linear-gradient(90deg, #D09D69 0%, #E0C1A1 100%)')
const id = ref()
onMounted(() => {
    console.log(route.query.id);
    id.value = route.query.id;
    console.log(id.value);
    CarVideoApi()
})
const videoData=reactive({
    videoplay:'',
    username:'',
    count:'',
    createtime:''
})

const CarVideoApi = () => {
    axios.get(`http://localhost:8080/api/select?id=${id.value}`).then(res => {
        console.log(res);
        videoData.videoplay = res.data.data[0].videoplay
        videoData.username = res.data.data[0].username
        videoData.count = res.data.data[0].count
        videoData.createtime = res.data.data[0].createtime
    })
}


const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');
</script>

<style scoped>
.van-nav-bar {
    background: linear-gradient(90deg, #D09D69 0%, #E0C1A1 100%);
}
.van-row{
    font-size: 13px;
    color: rgb(180, 180, 180);
    margin-top: 8px;
}
</style>